function setChart(id) {
    
    if (historyOption[id]==null) {
        return
    }

    $('#chart2').css('border','0px solid black')
    $('#chart3').css('border','0px solid black')
    $('#chart4').css('border','0px solid black')
    $('#chart5').css('border','0px solid black')
    $('#chart'+id).css('border','1px solid red')


    nowChartTheme = Ext.clone(nowHistoryThemeId[id])
    chartSource = Ext.clone(historyOption[id])
    nowChartSourceContent = null
    if (nowHistoryThemeId[id]==null) {
        Ext.getCmp('chartPreview').remove(0)
        Ext.getCmp('chartPreview').add(
            {
                listeners:{
                    render:function( obj, eOpts ){
                        chart1.dispose()
                        chart1 = echarts.init(document.getElementById('chart1'))
                        chart1.setOption(historyOption[id])
                    }
                },
                xtype:'container',
                html:' <div id="chart1" style="width: 900px;height:'+(document.documentElement.clientHeight-400)+'px;"></div>'
            }
        )
    } else {
        Ext.getCmp('chartPreview').remove(0)
        Ext.getCmp('chartPreview').add(
            {
                listeners:{
                    render:function( obj, eOpts ){
                        console.log(historyOption[id])
                        chart1.dispose()
                        echarts.registerTheme(nowHistoryThemeName[id], nowHistoryThemeSource[id])
                        chart1 = echarts.init(document.getElementById('chart1'), nowHistoryThemeName[id])
                        chart1.setOption(historyOption[id])
                    }
                },
                xtype:'container',
                html:' <div id="chart1" style="width: 900px;height:'+(document.documentElement.clientHeight-400)+'px;"></div>'
            }
        )
    }
}


function saveChartHistory() {
    var image = new Image();
    image.src = chart1.getDataURL({
        pixelRatio: 1
        //backgroundColor: '#fff'
    });

    image.width=314
    image.height=224

   

    //$a.setAttribute("download", "");
    //$a.click();

    if (nowChartHistory==null||nowChartHistory=="") {
        nowChartHistory = 2
    }

    $("#chart"+nowChartHistory).html('');
    document.getElementById("chart"+nowChartHistory).appendChild(image);
   // var temp = nowChartSourceContent!=null?JSON.parse(nowChartSourceContent):chartSource
   // console.log(temp)
    historyOption[nowChartHistory] = Ext.clone(chartSource)
    nowHistoryThemeId[nowChartHistory] = Ext.clone(nowChartTheme)
    nowHistoryThemeName[nowChartHistory] = Ext.clone(nowChartThemeName)
    nowHistoryThemeSource[nowChartHistory] = Ext.clone(nowChartThemeSource)


    nowChartHistory++
    if (nowChartHistory==6) {
        nowChartHistory = 2
    }

}